<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阻止冒泡事件-商品列表</title>
    <link rel="stylesheet" href="./goods.css">
</head>
<body>
     <div class="container">
         <div class="goods">
             <img src="./goods.jpg" >
             <div class="tit">
                 <span>新疆葡萄</span>
                 <span>$9.00/斤</span>
                 <img src="./heart.png"></img>
                 <img id="hf" style="display: none;" src="./heart_fill.png">
             </div>
         </div>
      </div>   
</body>
<script src="./jquery.js"></script>
<script>
    //监控页面加载
    $(document).ready(function(){

        $(".goods").click(function(e){
            location.href="./demo10.html";//点击商品跳转到详情页
        })
       /**两张图片切换效果
        * 第一步：写两个图片 第二个图片用样式隐藏
        * 第二步：点击第一个图片，把第一个图片隐藏 第二个图片显示
        * jquery实现方案：点击第一个图片，使用jquery hide（）方法显示第一个图片，
        *                  show（）方法显示第二个图片
        * 第三步：点击第二个图片，把第一个样式显示，第二个隐藏
        */
       $("#h").click(function(){
        //普通切换方案
        //$("#h").css("display","none");
        //$("#hf").css("display","inline");
        //jquery实现
        $("#h").hide();
        $("#hf").show();
        e.stopPropagationa();//阻止点击事件冒泡到父元素
       })      
       $("#hf").click(function(){
        //普通切换方案
        //$("#hf").css("display","none");
        //$("#hf").css("display","inline")
        //jquery实现
       })
    })
</script>
</html>